<template>
  <h4>----------H----------</h4>
  <ul>
    <li v-for="item in props.list" :key="item.id">
      {{ item.name }}--{{ item.age }}
    </li>
    <li>{{ props.a }}</li>
  </ul>
  <div class="">
  </div>
</template>

<script setup lang="ts" name="">
import { type Persons } from '@/types'
import type { PropType } from 'vue'

// 接受 + 限制类型 + 必要性 + 默认值
let props = withDefaults(
  defineProps<{ list: Persons, a: string }>(),
  {
    // 需要函数来返回值
    list: () => [{ id: '1', name: "默认值", age: 18 }]
  })

/*
const props = defineProps({
  list: {
    type: Array as PropType<Persons>,
    default: () => [{ id: '1', name: "默认值", age: 18 }],
  },
  a: {
    type: String,
  }
})
*/

</script>

<style scoped></style>